<script>
    import {ref} from 'vue';

    export default {
        // 知识点：vue3 中响应式API的使用(状态管理--组件内部)
        setup(props, context) {
            // 1.定义响应式的列表数据（json数组）
            /*
            一条评论：
              {
                    id:1,
                    title:'你好啊1'
              }
            */
            const list = ref([
                {
                    id:1,
                    title:'你好啊1'
                },
                {
                    id:2,
                    title:'你好啊2'
                },
                {
                    id:3,
                    title:'你好啊3'
                }
            ])

            // 3.定义响应式的数据msg,存发布评论时 广西框的内容
            const msg = ref("")
            const msg_id = ref(0);

            // 修改01：根据id 找到要修改的评论的内容、显示到 文本框中（回显数据）
            const edit = (id)=>{
                // 根据id,找到评论对象，返回的是一个数组
                let obj = list.value.filter((item)=>id==item.id)
                msg.value = obj[0].title; //取到评论的内容，同步到 文本框中
                msg_id.value = id; //保存 当前修改的评论id，后面会用
            }

            // 修改02：保存修改
            const saveComments = ()=>{
                // 找到当前的id,修改评论的内容
                let arr = list.value.map((val)=>{
                    if(msg_id.value == val.id){
                        val.title = msg.value;//修改后的值
                    }
                    return val;
                })
                console.log(arr)

                // 保存 修改
                list.value=arr;

                //还原
                msg.value="" //清空 文本框
                msg_id.value=0; //点击修改的时候才有,恢复到默认
            }

            // 添加
            const addComments = ()=>{
                let obj = {
                    id:list.value[list.value.length-1].id+1, //取最后一个元素的id,在此基础上加1
                    title:msg.value
                }
                list.value.push(obj) //向数组添加元素
            }

            // 删除
            const del = (id)=>{
                // 过滤掉不是当前id的元素，返回一个新数组
                let arr = list.value.filter((item)=>item.id !=id)
                list.value = arr; //保存
            }

            return {
                list,
                msg,
                msg_id,
                edit,
                saveComments,
                addComments,
                del
            }
        }
    }
</script>

<template>
    <div class="comments">
        <!-- <h2>评论列表</h2> -->
        <ul>
            <!-- 2.渲染列表 -->
            <ol v-for="(v,k) in list" :key="'list_'+k">
                {{v.id}}-->{{v.title}}
                <!-- 6.处理删除 -->
                <a href="#" @click.prevent="edit(v.id)">修改</a>
                &nbsp; &nbsp;
                <a href="#" @click.prevent="del(v.id)">删除</a>
            </ol>
           
        </ul>
        <hr>
        <!-- 4.变量与表单进行关联 -->
        <textarea name="" id="" cols="30" rows="10" v-model="msg"></textarea> {{msg}}
       <div>
        <!-- 5.处理添加 -->
        <button @click="addComments">添加</button> &nbsp;
        <button @click="saveComments" v-show="msg_id!=0">保存修改</button>{{msg_id}}
       </div>
    </div>
</template>

<style>
    .comments ul {
        padding: 0;
        margin: 0;
    }

    .comments ul ol {
        padding: 0;
        margin: 0;

    }
</style>